/* 【旅程详情】/【出行】 */

// 标题容器
.title {
  display: flex;
  padding: 12rpx;
}

// 标题图标
.title-icon {
  margin-top: -16rpx;
}


// 组件内容容器
.content {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}


// 出行容器
.trip-panel {
  display: flex;
  align-items: center;
  font-size: var(--font-size-small);
}


// 出行方式
.trip-type {
  width: 80rpx;
  padding-right: 12rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rpx;

  font-weight: bold;
  color: var(--color-text-second);

  // 出行方式图标
  .trip-icon {
    font-size: var(--font-size-normal);
  }
}


// 出行信息容器
.trip-info-panel {
  flex-grow: 1;
  padding-left: 24rpx;
  display: flex;
  flex-direction: column;
  gap: 36rpx;
  border-left: solid 1px var(--color-border);
}

// 出行信息
.trip-info {
  display: flex;
  align-items: center;
}


// 出发地，目的地
.trip-from, .trip-to {
  width: 120rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rpx;

  font-size: var(--font-size-normal);
  font-weight: bold;
}

// 出发地时间
.trip-from .trip-time {
  color: var(--color-primary);
}

// 目的地的时间
.trip-to .trip-time {
  color: var(--color-accent);
}


// 过程信息
.trip-process {
  flex-grow: 1;
  padding: 0 24rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

// 主信息
.trip-process-info {
  padding: 2rpx 12rpx;
  margin-bottom: 6rpx;
  border-radius: 4rpx;
  color: var(--color-text-dark);
  background-color: var(--color-primary);
}

// 备注
.trip-process-remark {
  width: 100%;
  padding-top: 4rpx;
  text-align: center;
  border-top: solid 1px var(--color-border);
}


// 北京地铁线路背景色
.line2 {
  background-color: #006098;
}

.line4 {
  background-color: #008e9c;
}

.line6 {
  background-color: #d29700;
}

.line16 {
  background-color: #76a32e;
}

.line0 {
  background-color: transparent;
}
